<template>
  <div class="aliali-user-quick-card">
    <!-- 登录状态 -->
    <div v-if="user.isLogin" class="user-card logged-in">
      <div class="user-header">
        <el-avatar
            :size="60"
            :src="user.avatar"
            class="user-avatar"
            @click="handleAvatarClick"
        >
          <span v-if="!user.avatar" class="avatar-fallback">
            {{ user.username?.charAt(0) || 'U' }}
          </span>
        </el-avatar>

        <div class="user-info">
          <h3 class="username" @click="handleProfileClick">
            {{ user.username }}
            <el-tag v-if="user.vip" type="warning" size="small" class="vip-tag">
              VIP{{ user.level }}
            </el-tag>
          </h3>
          <p class="user-level">Lv.{{ user.level }}</p>
          <div class="user-stats">
            <span class="stat-item">
              <strong>{{ user.coins }}</strong>
              <span>硬币</span>
            </span>
            <span class="stat-item">
              <strong>{{ user.follows }}</strong>
              <span>关注</span>
            </span>
            <span class="stat-item">
              <strong>{{ user.fans }}</strong>
              <span>粉丝</span>
            </span>
          </div>
        </div>
      </div>

      <div class="user-actions">
        <el-button type="primary" size="small" @click="handleUpload">
          <el-icon><Upload /></el-icon>
          投稿
        </el-button>
        <el-button size="small" @click="handleLive">
          <el-icon><VideoCamera /></el-icon>
          直播
        </el-button>
      </div>
    </div>

    <!-- 未登录状态 -->
    <div v-else class="user-card logged-out">
      <div class="login-prompt">
        <el-avatar :size="48" class="default-avatar">
          <el-icon><User /></el-icon>
        </el-avatar>
        <p class="login-text">登录后可以同步追漫记录</p>
        <el-button type="primary" size="small" @click="handleLogin">
          立即登录
        </el-button>
      </div>
    </div>

    <!-- 快速入口 -->
    <div class="quick-actions">
      <div
          v-for="action in quickActions"
          :key="action.id"
          class="action-item"
          @click="handleActionClick(action)"
      >
        <div class="action-icon" :style="{ color: action.color }">
          <el-icon><component :is="action.icon" /></el-icon>
        </div>
        <span class="action-text">{{ action.text }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  User,
  Upload,
  VideoCamera
} from '@element-plus/icons-vue'

// 修复：正确定义props
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  user: {
    type: Object,
    default: () => ({
      isLogin: false,  // 默认未登录状态更安全
      username: '游客',
      avatar: '',
      level: 0,
      coins: 0,
      follows: 0,
      fans: 0,
      vip: false
    })
  }
})

const emit = defineEmits(['login', 'upload', 'live', 'action-click'])

const router = useRouter()

// 快速操作列表
const quickActions = ref([
  { id: 'favorites', text: '我的收藏', icon: 'Star', color: '#ff6b6b' },
  { id: 'history', text: '观看历史', icon: 'Clock', color: '#4ecdc4' },
  { id: 'download', text: '离线缓存', icon: 'Download', color: '#45b7d1' },
  { id: 'later', text: '稍后再看', icon: 'Collection', color: '#96ceb4' }
])

// 处理方法
const handleLogin = () => {
  emit('login')
  router.push('/login')
}

const handleUpload = () => {
  emit('upload')
  router.push('/upload')
}

const handleLive = () => {
  emit('live')
  router.push('/live/start')
}

const handleAvatarClick = () => {
  router.push('/user/profile')
}

const handleProfileClick = () => {
  router.push('/user/profile')
}

const handleActionClick = (action) => {
  emit('action-click', action)
  const routes = {
    favorites: '/user/favorites',
    history: '/user/history',
    download: '/download',
    later: '/user/watch-later'
  }
  if (routes[action.id]) {
    router.push(routes[action.id])
  }
}
</script>

<style scoped>
.aliali-user-quick-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.user-card {
  margin-bottom: 16px;
}

.user-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.user-avatar {
  cursor: pointer;
  border: 2px solid #f0f0f0;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.user-avatar:hover {
  border-color: #00a1d6;
  transform: scale(1.05);
}

.avatar-fallback {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #00a1d6, #00c4cc);
}

.user-info {
  flex: 1;
  min-width: 0;
}

.username {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #18191c;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.username:hover {
  color: #00a1d6;
}

.vip-tag {
  font-size: 10px;
  padding: 1px 6px;
  height: auto;
}

.user-level {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: #999;
}

.user-stats {
  display: flex;
  gap: 12px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  color: #666;
}

.stat-item strong {
  font-size: 14px;
  font-weight: 600;
  color: #00a1d6;
  margin-bottom: 2px;
}

.user-actions {
  display: flex;
  gap: 8px;
}

.user-actions .el-button {
  flex: 1;
}

/* 未登录状态 */
.logged-out {
  text-align: center;
  padding: 20px 0;
}

.login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.default-avatar {
  background: linear-gradient(135deg, #00a1d6, #00c4cc);
  color: white;
}

.login-text {
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* 快速操作 */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-item:hover {
  background: #f5f7fa;
  transform: translateY(-1px);
}

.action-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.action-text {
  font-size: 12px;
  color: #666;
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .aliali-user-quick-card {
    padding: 12px;
  }

  .user-header {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .user-stats {
    justify-content: center;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }
}
</style>